<template>
	<yplayout>
		<template #header="props">
			<div class="flex items-center">
				<i class="ri-2x text-gray-500 ml-2" :class="props.meta.icon || 'ri-information-line'"></i>
				<p class="text-xl px-2">公告列表</p>
			</div>
		</template>
		<template #list>
			<div class="flex justify-between px-4 pb-5">
				<div class="flex items-center space-x-2">
					<ypinput
						v-model="searchValue"
						class="min-w-56"
						placeholder="请输入关键词"
						:cls="true"
						@keyup.enter="goSearch"
					></ypinput>
					<button class="btn btn-hong" @click="goSearch">
						<i class="ri-search-line size text-lg relative"></i>
					</button>
				</div>
				<button class="btn btn-chen" type="button" @click="router.push('add')">
					<i class="ri-add-line ri-lg pr-1"></i>发布公告
				</button>
			</div>
			<table class="yp-table-datalist">
				<thead>
					<tr class="*:whitespace-nowrap">
						<th class="w-1/12">ID</th>
						<th>标题</th>
						<th class="w-1/12">发布人</th>
						<th class="w-2/12">发布时间</th>
						<th class="text-right w-52">
							<div class="pr-16">操作</div>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in articleList" :key="item.id">
						<td>{{ item.id }}</td>
						<td>{{ item.title }}</td>
						<td>{{ item.admin_id_name }}</td>
						<td>{{ item.create_time }}</td>
						<td>
							<div class="flex items-center space-x-2 justify-end whitespace-nowrap">
								<button class="btn btn-lan" @click="router.push(`view?id=${item.id}`)">查看</button>
								<button class="btn btn-chen" @click="router.push(`edit?id=${item.id}`)">编辑</button>
								<button class="btn btn-hong" @click="deleteArticle(item.id)">删除</button>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
			<div v-if="pageData.pageCount > 1">
				<yppage @topage="topage" :pageData="pageData" />
			</div>
		</template>
	</yplayout>
</template>

<script setup>
	import { postData, confirms, alter } from '@/common/base'
	import { router } from '@/router'
	import { onActivated, ref, reactive } from 'vue'

	const searchValue = ref()

	const articleList = ref([])
	const pageData = reactive({
		totalRecords: 0, //总记录数
		pageCount: 0, //总页数
		currentPage: router.currentRoute.value.query.page || 1 //当前页
	})
	const getList = async () => {
		const params = {
			page: pageData.currentPage,
			limit: 5,
			keyword: searchValue.value
		}
		try {
			const res = await postData('article/index', params)
			if (res.code) {
				const { data, total, last_page } = res.data
				if (pageData.currentPage > last_page && last_page !== 0) {
					topage(last_page)
				} else {
					articleList.value = data
					pageData.totalRecords = total
					pageData.pageCount = last_page
				}
			}
		} catch (error) {}
	}

	const topage = (page) => {
		pageData.currentPage = page
		router.push('?page=' + page)
		getList()
	}

	const goSearch = () => {
		pageData.currentPage = 1
		getList()
	}

	const deleteArticle = async (id) => {
		confirms({ text: '确认删除吗？' })
			.then(async () => {
				try {
					const resp = await postData('article/delete', { id: id })
					if (resp.code == 1) {
						alter({ type: 'alter-success', text: resp.msg })
						getList()
					}
				} catch (error) {}
			})
			.catch((e) => {})
	}

	onActivated(() => {
		getList()
	})
</script>
